<template>
  <div class="list">
    <!-- 没有关注或者粉丝时提示 -->
    <div class="info-empty" v-if="!info.length">
      <div>
        <p v-if="activeName === 'fans'">
          还没有被关注哦！请多发布菜谱，更容易被别人找到哦！
        </p>
        <p v-if="activeName === 'following'">
          还没有关注别人哦！可以预览菜谱，找到别人哦！
        </p>
      </div>
    </div>
    <ul class="fans-list" v-else>
      <li v-for="item in info" :key="item.userId">
        <!-- 粉丝头像 -->
        <div class="fans-avater">
          <img :src="item.avatar" alt="" />
        </div>
        <!-- 介绍 -->
        <div class="fans-info">
          <!-- 名字 -->
          <div class="name">
            <router-link
              :to="{ name: 'user-space', query: { userId: item.userId } }"
              >{{ item.name }}</router-link
            >
          </div>
          <!-- 基础信息 -->
          <div class="info">
            <span>粉丝：{{ item.follows_len }}</span>
            <span> | </span>
            <span>关注：{{ item.following_len }}</span>
          </div>
          <!-- 简介 -->
          <div class="desc" v-if="item.sign">简介：{{ item.sign }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      //粉丝或关注列表
      type: Array,
      default() {
        return [];
      },
    },
    activeName: {
      type: String,
      default: "fans",
    },
  },
};
</script>

<style  lang="stylus" scoped>
.list {
  a {
    color: #f00;
  }

  .list {
    /* padding: 20px 20px; */
  }

  .info-empty {
    text-align: center;
  }

  li {
    border-bottom: 1px solid #eee;
    padding: 20px 20px;
    display: flex;
    font-size: 14px;

    /* 去掉最后一个li标签的下边框 */
    &:last-child {
      border-bottom: 0;
    }

    .fans-avater {
      width: 80px;
      height: 80px;
      background-color: red;
      margin-right: 30px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .fans-info {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }
}
</style>